<template>
  <!-- 评论内容 -->
  <div class="comment_item">
    <div class="info">
      <img class="img" :src="$axios.defaults.baseURL+comment.account.defaultAvatar" alt />
      <div class="nickname">{{comment.account.nickname}}</div>
      <div class="date">{{newDate(comment)}}</div>
      <div class="floor">{{parentDepth + 1}}楼</div>
    </div>
    <!-- 父级评论 -->
    <div class="parent">
      <ParentComment @replyParent="replyComment" :parentData="comment.parent" :level="parentDepth" />
    </div>
    <div class="content_reply">
      <div class="content">
        {{comment.content}}
        <div class="imgList" v-if="comment.pics">
          <div class="imgItem" v-for="(item,index) in comment.pics" :key="index">
            <img class="img" :src="$axios.defaults.baseURL+item.url" alt />
          </div>
        </div>
      </div>
      <div class="reply" @click="replyComment(comment)">回复</div>
    </div>
  </div>
</template>

<script>
import ParentComment from "@/components/post/parent/parentComment";
export default {
  components: {
    ParentComment
  },
  data() {
    return {};
  },
  props: {
    comment: Object
  },
  // 计算属性
  computed: {
    // 计算评论楼层
    parentDepth() {
      return this.getParentDepth(this.comment.parent, 0);
    }
  },
  methods: {
    // 格式化时间
    newDate(date) {
      return this.$moment(date.created_at).format("YYYY-MM-DD hh:mm");
    },
    // 计算楼层
    getParentDepth(parentLevel, level) {
      if (parentLevel) {
        return this.getParentDepth(parentLevel.parent, level + 1);
      } else {
        return level;
      }
    },
    // 回复评论
    replyComment(comment) {
      const user = {
        userId: comment.id,
        userName: comment.account.nickname
      };
      this.$emit("replyParent", user);
    }
  }
};
</script>
<style lang="less" scoped>
.comment_item {
  padding: 15px 15px 0 15px;
  border-bottom: 1px dashed #ededed;
  .info {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
    padding-bottom: 6px;
    .img {
      padding: 0 5px;
      width: 16px;
      height: 16px;
      object-fit: cover;
      border-radius: 50%;
    }
    .nickname {
      padding-right: 5px;
    }
    .date {
      color: #999;
    }
    .floor {
      flex: 1;
      text-align: right;
    }
  }
  .parent {
    margin-left: 30px;
  }
  .content_reply {
    .content {
      padding: 6px 30px 0;
      .imgList {
        display: flex;
        margin-top: 6px;
        .imgItem {
          padding: 6px;
          margin-top: 2px;
          margin-right: 2px;
          width: 90px;
          height: 90px;
          border: 1px dashed #ddd;
          border-radius: 4px;
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    .reply {
      padding: 3px 0;
      font-size: 12px;
      text-align: right;
      color: #1e50a2;
      opacity: 0;
    }
    &:hover .reply {
      opacity: 1;
      cursor: pointer;
    }
  }
  &:last-child {
    border-bottom: none;
  }
}
</style>